$(function () {
    $('.menuList span').click(function () {
        var index = $(this).index();
        $(this).addClass('isSelect').siblings().removeClass('isSelect');
        $(this).parent().parent().next().find('.recipesItemList').hide().eq(index).show();
        $(this).parent().parent().next().find('.hotMenuBox').hide().eq(index).show();
        $(this).parent().parent().next().find('.menuAll').hide().eq(index).show();
        $(this).parent().parent().next().find('.healthyTtpe').hide().eq(index).show();
    })
    //动态生成可能需要使用事件委托
    $('.foodContentL ul li').click(function () {
        var index = $(this).index()
        $(this).addClass('isTrue').siblings().removeClass('isTrue');
        $(this).parent().parent().next().find('.typeBox').hide().eq(index).show();
    })

    $('.menu').on('click', function (e) {
        $('.zzc').show();
        $('.nav').fadeIn(1000)
        $('html').css({
            overflow: 'hidden'
        })
    });

    $('.zzc').on('click', function () {
        $('html').css({
            // overflow 属性规定当内容溢出元素框时发生的事情。
            // hidden   内容会被修剪，并且其余内容是不可见的。
            // auto     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
            overflow: 'auto'
        })
        // fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
        $('.nav').fadeOut();
        // 该插件扩展自 jQuery 内置的 .hide() 方法。
        // hide()  使用自定义效果来隐藏匹配的元素。
        $('.zzc').hide();
    });
})